<!-- 引入notifications的模板标签 -->
{% load notifications_tags %}
{% notifications_unread as unread_count %}

<!-- 定义导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container">
    <!-- 导航栏商标 -->
    <a class="navbar-brand" href="#">阿狸博客</a>

    <!-- 导航入口 -->
    <div>
      <ul class="navbar-nav">
        <!-- 条目 -->
        <li class="nav-item">
          <a class="nav-link" href="{% url 'article:article_list' %}">文章</a>
        </li>
        <!-- 写文章 -->
        <li class="nav-item">
          <a class="nav-link" href="{% url 'article:article_create' %}"
            >写文章</a
          >
        </li>

        <!-- Django的 if 模板语句 -->
        {% if user.is_authenticated %}
        <!-- 如果用户已经登录，则显示用户名下拉框 -->
        <li class="nav-item dropdown">
          <a
            class="nav-link dropdown-toggle"
            href="#"
            id="navbarDropdown"
            role="button"
            data-toggle="dropdown"
            aria-haspopup="true"
            aria-expanded="false"
          >

              <!-- 新增代码，小红点 -->
                {% if unread_count %}
                    <svg viewBox="0 0 8 8"
                         width="8px"
                         height="8px">
                        <circle cx="4"
                                cy="4"
                                r="4"
                                fill="#ff6b6b"
                                ></circle>
                    </svg>
                {% endif %}

            {{ user.username }}
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <!-- 新增代码，通知计数 -->
                <a class="dropdown-item" href="{% url "notice:list" %}">通知
                    {% if unread_count %}
                    <span class="badge badge-danger">{{ unread_count }}</span>
                    {% endif %}
                </a>

            <a class="dropdown-item" href='{% url "userprofile:edit" user.id %}'>个人信息</a>
            <!-- 新增 -->
            <a class="dropdown-item" href="#" onclick="user_delete()">删除用户</a>
            <a class="dropdown-item" href='{% url "userprofile:logout" %}'>退出登录</a>
          </div>
        </li>
        <!-- 如果用户未登录，则显示 “登录” -->
        {% else %}
        <li class="nav-item">
          <a class="nav-link" href="{% url 'userprofile:login' %}">登录</a>
        </li>
        <!-- if 语句在这里结束 -->
        {% endif %}

      </ul>
    </div>
  </div>
</nav>

<!-- 新增 -->
{% if user.is_authenticated %}
<form 
    style="display:none;" 
    id="user_delete"
    action="{% url 'userprofile:delete' user.id %}" 
    method="POST"
>
{% csrf_token %}
    <button type="submit">发送</button>
</form>
    <script>
        function user_delete() {
            // 调用layer弹窗组件
            layer.open({
                title: "确认删除",
                content: "确认删除用户资料吗？",
                yes: function(index, layero) {
                    $('form#user_delete button').click();
                    layer.close(index);
                },
            })
        }
    </script>
{% endif %}


<style>
.navbar-dark .navbar-nav .nav-link {
    font-family: '宋体', sans-serif;
    font-size: 20px;
}

</style>